$(function() {
    var SoLuongSD = 0;
    var option1 = ( {
        chart: {
            renderTo: 'Chart1',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },

        title: {
            text: 'Biểu đồ tình trạng sử dụng tài sản'
        },
        tooltip: {
            formatter: function() {  return '<b>' + this.series.name + ': </b>'
                + parseInt((this.point.percentage)*SoLuongSD/100) + ' cái.';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Số lượng',
            data: []
        }]
    });
    var option2 = ( {
        chart: {
            renderTo: 'Chart2',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },

        title: {
            text: 'Biểu đồ tình trạng sử dụng tài sản'
        },
        tooltip: {
            formatter: function() {  return '<b>' + this.series.name + ': </b>'
                + parseInt((this.point.percentage)*SoLuongSD/100) + ' cái.';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Số lượng',
            data: []
        }]
    });
function Loai(data) {
    this.id = data.id;
    this.Ten = data.TenLoai
}
function Taisan(data){
    this.id = data.id;
    this.TaiSan = data.TenTS;
    this.Phong = data.Phong;
    this.NgaySD = data.Ngay;
    this.TinhTrang = data.TinhTrang;
    this.SoLuong = data.SoLuong
}
function PhieuNhap(data){
    this.NhanVien = data.NhanVIen;
    this.SoLuong = data.SoLuong;
    this.Ngay = data.Ngay;
}
function Nhatki(data){
    this.PhongDen = data.PhongDen;
    if (data.PhongDi != null)
    this.PhongDi = data.PhongDi;
    else
    this.PhongDi = "Không có";
    this.SoLuong = data.SoLuong;

    this.NgayDen = data.NgayDen;
    if (data.NgayDi != null)
        this.NgayDi = data.NgayDi;
    else
        this.NgayDi = "Đang dùng";
}

function Reading(tot,sua,thanhli,tongsl){

    tot = tot * 100 / tongsl;

    sua = sua * 100 / tongsl;

    thanhli = thanhli * 100 / tongsl;

    var dstk = [
        ['Tốt',    tot],
        ['Sủa chữa',   sua],
        ['Thanh lí',   thanhli]
    ];
    return dstk;
}

function ViewModel(){
    var self = this;
    self.Loais = ko.observableArray();
    self.TaiSans = ko.observableArray();
    self.LoaiChon = ko.observable();
    self.TSChon = ko.observable();
    self.idChon = ko.observable(1);
    self.DanhSach = ko.observableArray();
    self.PhieuNhaps = ko.observableArray();

    self.Chons = ko.observableArray(["Sử dụng trước ngày", "Sử dụng sau ngày", "Sử dụng trong khoảng" ])
    self.Chon = ko.observable();
    self.NgayChon = ko.observable();
    self.NgayChon2 = ko.observable();
    self.DSHD = ko.observableArray();

    //Method
    self.Tots = ko.computed(function(){
        var total = 0;
        ko.utils.arrayForEach(this.DanhSach(), function(item) {
            var value = parseFloat(item.SoLuong);
            if (item.TinhTrang == "Tốt") {
                total += value;
            }
        });
        return total;
    }, this);
    self.Suas = ko.computed(function(){
        var total = 0;
        ko.utils.arrayForEach(this.DanhSach(), function(item) {
            var value = parseFloat(item.SoLuong);
            if (item.TinhTrang == "Đang Sửa") {
                total += value;
            }
        });
        return total;
    }, this);
    self.ThanhLis = ko.computed(function(){
        var total = 0;
        ko.utils.arrayForEach(this.DanhSach(), function(item) {
            var value = parseFloat(item.SoLuong);
            if (item.TinhTrang == "Thanh lý") {
                total += value;
            }
        });
        return total;
    }, this);
    self.SLPhong = ko.computed(function(){
        var total = 0;
        ko.utils.arrayForEach(this.DanhSach(), function(item) {
            if (item.Phong != null) {
                total += 1;
            }
        });
        return total;
    }, this);
    self.FeedData = function(chart){
        SoLuongSD = 0;
        ko.utils.arrayForEach(this.DanhSach(), function(item) {
            var value = parseFloat(item.SoLuong);
            SoLuongSD += value;
        });
        var dstk = Reading(self.Tots(),self.Suas(),self.ThanhLis(),SoLuongSD);
        if (chart == 1)
        {
            Highcharts.setOptions({
                chart: {
                    width: $("#Tab1Content").width(),
                }
            });
            var newchart = new Highcharts.Chart(option1);   
        } 
        else
        {
            Highcharts.setOptions({
                chart: {
                    width: $("#Tab2Content").width(),
                }
            });
            var newchart = new Highcharts.Chart(option2)
        }
        newchart.series[0].setData(dstk,true);
    }
    self.ShowLoai = function(){
        $("#Tab1Content").show();
        $("#Tab2Content").hide();
        self.idChon(self.LoaiChon().id)
        $.getJSON("getCtPhong.json?loaiid=" + self.LoaiChon().id, function(allData){
            var mappedTaisans = $.map(allData, function(item){ return new Taisan(item)});
            self.DanhSach(mappedTaisans);
            self.FeedData(1);
        });
    };
    self.ShowTS = function(){
        $("#Tab2Content").show();
        $("#Tab1Content").hide();
        $("#dshd").hide();
        self.idChon(self.TSChon().id)
        $.getJSON("getCtPhong.json?tsid=" + self.TSChon().id, function(allData){
            var mappedTaisans = $.map(allData, function(item){ return new Taisan(item)});
            self.DanhSach(mappedTaisans);
            self.FeedData(2);
        })
        $.getJSON("getPhieuNhapTS.json?tsid=" + self.TSChon().id, function(allData){
            var mappedPhieuNhaps = $.map(allData, function(item){ return new PhieuNhap(item)});
            self.PhieuNhaps(mappedPhieuNhaps);
        })
    };
    self.TraNgay = function(){
        $("#dshd").show();
        if (self.Chon() == "Sử dụng trước ngày"){
            $.getJSON('getHoatDong.json?tsid=' + self.TSChon().id + "&&ngaychon=" + self.NgayChon() + "&&chon=1",
                function (allData) {
                var mappedDSHD = $.map(allData, function (item) { return new Nhatki(item) });
                self.DSHD(mappedDSHD);
            });
        }
        else if (self.Chon() == "Sử dụng sau ngày"){
            $.getJSON('getHoatDong.json?tsid=' + self.TSChon().id + "&&ngaychon=" + self.NgayChon() + "&&chon=2",
                function (allData) {
                    var mappedDSHD = $.map(allData, function (item) { return new Nhatki(item) });
                    self.DSHD(mappedDSHD);
                });
        }
        else if (self.Chon() == "Sử dụng trong khoảng"){
            $.getJSON('getHoatDong.json?tsid=' + self.TSChon().id + "&&ngaychon=" + self.NgayChon() +"&&ngaychon2=" + self.NgayChon2() + "&&chon=3",
                function (allData) {
                    var mappedDSHD = $.map(allData, function (item) { return new Nhatki(item) });
                    self.DSHD(mappedDSHD);
                });
        }
    };

    $.getJSON('getLoai.json', function (allData) {
        var mappedLoais = $.map(allData, function (item) { return new Loai(item) });
        self.Loais(mappedLoais);
    });
    $.getJSON('getTaiSan.json', function (allData) {
        var mappedTSs = $.map(allData, function (item) { return new Taisan(item) });
        self.TaiSans(mappedTSs);
    });
}
    ko.applyBindings(new ViewModel());
    $( "#tabs" ).tabs();
    $( ".datepicker" ).datepicker({
        changeYear:true,
        changeMonth:true,
        showOn:'button',
        buttonImage:'/assets/calendar_icon.gif',
        buttonImageOnly:true,
        buttonText:"Vui lòng chọn ngày..."
    });
    $("#Tab1Content").hide();
    $("#Tab2Content").hide();
    $("#BDTK1").hide();
    $("#BDTK2").hide();
    $("#Xem_BDTK1").click(function(){
        $("#BDTK1").show('slide', {direction: "right"},500);
        $("#BTK1").hide('slide', {direction: "left"},500);
    })
    $("#Xem_BTK1").click(function(){
        $("#BTK1").show('slide', {direction: "left"},500);
        $("#BDTK1").hide('slide', {direction: "right"},500);
    })
    $("#Xem_BDTK2").click(function(){
        $("#BDTK2").show('slide', {direction: "right"},500);
        $("#BTK2").hide('slide', {direction: "left"},500);
    })
    $("#Xem_BTK2").click(function(){
        $("#BTK2").show('slide', {direction: "left"},500);
        $("#BDTK2").hide('slide', {direction: "right"},500);
    })
});
